body,
html {
  height: 100%;
  font-size: 16px;
  font-family: 'PingFang SC', Microsoft YaHei, '微软雅黑', Tahoma, Arial, HeiTi,
    '黑体', sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
  color: #333;
}
i {
  font-style: normal;
}
p,
body,
ul,
figure {
  padding: 0px;
  margin: 0px;
}
input {
  outline: none;
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: transparent;
}
body {
  overflow: hidden;
  padding: 0 !important;
}
.el-form-item {
  margin-bottom: 5px !important;
}
.el-dialog__body {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}
.el-dialog {
  margin-top: 0 !important;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #ccc;
}

.content {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  background-image: url('../bg.png');
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #0F084F;

  header {
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 1.5rem ;
    .logo {
      height: 2.5rem;

      img {
        display: inline-block;
        height: 100%;
      }
    }

    .slogan {
      height: 1.25rem;
      padding: 0.24px;
      background: 

      img {
        display: inline-block;
        height: 100%;
      }
    }
  }

  // .mask {
  //   -webkit-filter: blur(5px);
  //   filter: blur(5px);
  // }

  .main {
    position: relative;
  }

  .footer {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;

    .el-button {
      &.is-disabled {
        opacity: 0.4;
        color: #338FFF;
      }
    }

    .adding {
      .el-input__inner,
      .el-button {
        border-radius: 0;
      }
    }
  }

  .pop-layout {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 4rem 2rem;

    .el-card {
      border: 2px solid #1F1F7E;
      background: rgba(12,12,76,0.9);
      border-image: linear-gradient(#338FFF,#1F1F7E) 20 20;
      min-height: 550px;

      &__body {
        padding: 1.25rem 3rem;
        overflow: auto;
      }

      h3 {
        font-size: 1.75rem;
        font-weight: 600;
        margin: 1rem 0 2rem;
        color: #338FFF;
        text-align: center;
        min-width: 20rem;
      }
    }
  }
 
  .bounce-enter-active {
    animation: bounce-in 1.5s;
  }
  .bounce-leave-active {
    animation: bounce-in 0s reverse;
  }
}

.flex {
  display: flex;

  &-col {
    flex-direction: column;
  }
}

.gap {
  &-2 { gap: 0.5rem;}
  &-4 { gap: 1rem;}
  &-12 { gap: 3rem;}
}

//grid
.grid { display: grid;}
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) };

.items-center {
  align-items: center;
}

.justify {
  &-between { justify-content: space-between;}
  &-center { justify-content: center;}
}

.el-button {
  &--text i {
    font-size: 1.25rem;
  }
}

// padding
.p {
  &-2 { padding: 0.5px; }
  &-4 { padding: 1rem; }
  &-6 { padding: 1.5rem; }
  &x-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.ym-svg {
  width: 1.5rem;
  height: 1.5rem;
  color: white;
}

.hidden {
  visibility: hidden;
}

